<template>
	<div class="es-block">
		<div>
			<div class="label">当前报警数量</div>
			<div class="content">
				<el-text class="value" type="primary">{{ warnCount }}</el-text>
			</div>
		</div>

		<div>
			<div class="label">本次监测已经持续</div>
			<div class="content">
				<el-text class="value" type="primary">{{ durationTime[0] }}</el-text>
				<el-text class="unit">{{ durationTime[1] }}</el-text>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ElText } from "element-plus";
import { getDuration } from "@/utils/day";

const props = defineProps({
	warnCount: {
		type: Number,
		default: 0,
	},
	duration: {
		type: Number,
		default: 0,
	},
});

const durationTime = computed(() => {
	return getDuration(props.duration);
});
</script>

<style lang="scss" scoped>
.es-block {
	width: 100%;
	height: 100%;
	margin-top: 80px;
	text-align: center;
	display: flex;
	justify-content: space-around;

	.label {
		font-size: 28px;
	}

	.content {
		margin-top: 36px;
	}

	.value {
		margin-top: 28px;
		font-size: 55px;
	}

	.unit {
		font-size: 32px;
		margin-left: 12px;
	}
}
</style>
